<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中华冷兵器</title>
    <!-- all -->
    <link rel="stylesheet" href="css/index-basic.css">
    <link rel="stylesheet" href="css/util-footer.css">
    <!-- 0 ~ 1400 -->
    <link rel="stylesheet" href="css/index-1474.css" media="screen and (max-width: 1400px)">
    <!-- 1400 ~ inf -->
    <link rel="stylesheet" href="css/index-1474.css" media="screen and (min-width: 1400px)">
    <!-- 1650 ~ inf -->
    <link rel="stylesheet" href="css/index-1650.css" media="screen and (min-width: 1650px)">
    <!-- util -->
    <link rel="stylesheet" href="css/index-util.css">
    <!-- yellowBlock -->
    <link rel="stylesheet" href="css/index-yellowBlock.css">
    <!-- celect -->
    <link rel="stylesheet" href="css/mouse-celect.css">
    <link rel="stylesheet" href="css/foot.css">
</head>

<body>
    <div class="nav">
        <img src="img/util/冷兵器 (1).png" alt="" class="logo">
        <div class="content">
            <a href="html/forum.html">论坛
                <div class="shapeHover"></div>
                <div class="shapeHover1"></div>
            </a>
            <a href="html/history.html">历史
                <div class="shapeHover"></div>
                <div class="shapeHover1"></div>
            </a>
            <img src="img/icon/icons8-战斗-100.png" alt="" class="middle">
            <a href="">工艺
                <div class="shapeHover"></div>
                <div class="shapeHover1"></div>
            </a>
            <a href="">文创
                <div class="shapeHover"></div>
                <div class="shapeHover1"></div>
            </a>
        </div>
        <div class="righter">
            <input type="text" placeholder="请输入关键字">
            <img src="img/icon/Icon awesome-search.png" alt="" class="search">
            <a href="html/enroll.html"><img src="img/icon/组 44.png" alt="" class="user"></a>
        </div>
    </div>
    <div class="banner">
        <div class="item">
            <img src="img/index/组 40.png" alt="" class="bg">
            <img src="img/index/十万余年的守候.png" alt="" class="titleImg">
            <a href="html/history.html"><img src="img/index/组 32.png" alt="" class="btn"></a>
        </div>
        <div class="dotList">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <div class="main">
        <div class="intro">
            <div class="left">
                <div class="title">
                    <img src="img/icon/icons8-战斧-100.png" alt="">
                    <h1>了解<br>冷兵器</h1>
                </div>

                <p class="content">
                    冷兵器一般指不利用火药、炸药等热能打机系统和化学推进手段，在战斗中直接杀伤敌人，保护自己的武器装备，广义的冷兵器则指的是冷兵器时代的所有作战装备
                </p>
                <div class="sub">
                    <a class="b1" href="html/history.html#stage1">石器时代</a>
                    <a class="b2" href="html/history.html#stage2">青铜时代</a>
                    <a class="b3" onclick="alert('暂无与铁器时代相关的历史资料');">铁器时代</a>
                </div>
                <div class="yelloBlock yb1"></div>
                <div class="yelloBlock yb2"></div>
                <div class="yelloBlock yb3"></div>
                <div class="yelloBlock yb4"></div>
                <div class="yelloBlock yb5"></div>
            </div>
            <div class="right">
                <!-- 轮播图图片 -->
                <div class="imgSwiperBox">

                    <img src="img/index/11.jpg.png" alt="" class="showImg" id="swipperImg">
                </div>
                <div class="buttonArea">
                    <img src="img/icon/组 88.png" alt="" class="leftBtn" id="afterSwipper">
                    <img src="img/icon/组 88.png" alt="" class="rightBtn" id="nextSwipper">
                </div>
                <div class="subicon">
                    <img src="img/icon/Icon simple-wechat.png" alt="">
                    <img src="img/icon/Icon awesome-facebook-square.png" alt="">
                    <img src="img/icon/Icon material-email.png" alt="">
                </div>
                <div class="yelloBlock yb1"></div>
                <div class="yelloBlock yb2"></div>
            </div>
        </div>
        <div class="information">
            <div class="left">
                <img src="img/index/17.png" alt="">
                <div class="yelloBlock yb1"></div>
                <div class="yelloBlock yb2"></div>
            </div>
            <div class="mid">
                <div class="titleArea">
                    <img src="img/icon/icons8-minecraft的剑-100.png" alt="" class="titleIcon left-icon">
                    <span class="title">论坛公告</span>
                    <img src="img/icon/icons8-minecraft的剑-100.png" alt="" class="titleIcon right-icon">
                </div>
                <div class="mainContint">
                    第一章总则
                    <br>
                    第1条:为建立正常的讨论机制,规范论坛管理,
                    保护广大用户的正当权益,真正体现公正、公
                    平、公开的原则,为聊友创造一个良好的讨论娱
                    乐环境,特制定本制度。
                    <br>
                    第2条:本论坛内的言论、信息、资料必须符合地
                    方政府法规、国家法律和国际法律的有关规定,
                    禁止一切涉及、有可能助长国内不利条件、唆使
                    他人构成犯罪以及不文明的言论和信息。
                    <br>
                    第3条:......
                </div>
                <a href="html/information.html">
                    <img src="img/icon/组 56.png" alt="" class="moreBtn">
                </a>
            </div>
            <div class="right">
                <div class="year">2021<span>—————————</span></div>
                <img src="img/index/12.png" alt="" class="show">
                <div class="yelloBlock yb0"></div>
                <div class="yelloBlock yb1"></div>
                <div class="yelloBlock yb2"></div>
                <div class="yelloBlock yb3"></div>
                <div class="yelloBlock yb4"></div>
                <div class="yelloBlock yb5"></div>
                <div class="yelloBlock yb6"></div>
                <div class="yelloBlock yb7"></div>
                <div class="yelloBlock yb8"></div>
            </div>
        </div>
        <div class="forum" id="forumVue">
            <div class="left">
                <div class="bigTitle">F<br>O<br>R<br>U<br>M</div>
                <div class="hotFirstBtn btn" @click="hotSort">
                    热度优先
                    <img src="img/icon/icons8-皇家海军陆战队-96.png" alt="">
                </div>
                <div class="timeFirstBtn btn" @click="timeSort">
                    时间优先
                    <img src="img/icon/icons8-皇家海军陆战队-96.png" alt="">
                </div>
                <img src="img/icon/组 56.png" class="upBtn" @click="upUpdate"></img>
                <img src="img/icon/组 56.png" class="downBtn" @click="downUpdate"></img>
            </div>
            <div class="right">
                <div class="white"></div>
                <!-- item -->
                <div class="item" v-for="(forum, index) in forumArr_3">
                    <div class="hot">
                        <img src="img/icon/Icon metro-fire.png" alt="">
                        <span class="num">{{forum.loveNum}}</span>
                    </div>
                    <img src="img/util/2.png" :src="forum.imgSrc" alt="" class="show">
                    <div class="textArea">
                        <h2>{{forum.title}}</h2>
                        <div class="data">
                            <img src="img/icon/Icon material-collections-bookmark.png" alt="">
                            <span class="hotNum">{{forum.hotNum}}</span>
                            <img src="img/icon/Icon material-share.png" alt="">
                            <span class="sharNum">{{forum.sharNum}}</span>
                            <img src="img/icon/Icon material-comment.png" alt="">
                            <span class="talkNum">{{forum.talkNum}}</span>
                        </div>
                        <hr>
                        <p>{{forum.content}}</p>
                        <img src="img/icon/组 56.png" alt="" class="more" @click="gotoUrl(index)">
                    </div>
                </div>
                <!-- item -->
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="word">
            <img src="img/foot/word.png" alt="">
        </div>
        <div class="foot_box">
            <div class="foot_nav">
                <ul>
                    <li><a href="html/forum.html">论坛
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                    <li><a href="html/history.html">历史
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                    <li><a href="#">工艺
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                    <li><a href="#">文创
                            <div class="shapeHover"></div>
                            <div class="shapeHover1"></div>
                        </a></li>
                </ul>
            </div>
            <div class="foot_imgs">
                <img src="img/icon/Icon awesome-facebook(1).png" alt="">
                <img src="img/icon/Icon awesome-qq(1).png" alt="">
                <img src="img/icon/Icon simple-wechat(1).png" alt="">
                <img src="img/icon/Icon simple-googlehangoutschat(1).png" alt="">
                <img src="img/icon/Icon simple-letterboxd(1).png" alt="">
            </div>
            <div class="foot_search">
                <input type="text" placeholder="请输入关键字"><img src="img/icon/Icon awesome-search.png" alt="">
            </div>
        </div>
    </div>
</body>
<!-- jq -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- vue -->
<script src="js/vue.js"></script>
<!-- js -->
<script src="js/index.js"></script>
<script src="js/mouse.js"></script>
<script src="js/index-swepper.js"></script>
<script src="js/loveNumberAdd.js"></script>

</html>